<template>
  <div>
      <!-- <Filters
      block
      :form="searchForm"
      :filterData="filterData"
      @confirm="changePage(1)"
    /> -->
    <div class="container">
      <DataTable
        rowKey="checkDetailId"
        :tableData="Data"
        :tableColumn="tableColumn"
        @refresh="getList"
      >
      </DataTable>
    </div>
    <CommonDialog
      :rows="rows"
      :form="form"
      :title="dialogType === 'add' ? '新增配置' : '编辑配置'"
      :visible="formVisible"
      @hideDialog="hideFormVisible"
      @confirm="confirmHandle()"
    />
  </div>
</template>
<script lang='ts'>
import { Component, Watch, Vue } from 'vue-property-decorator'

@Component
export default class acceptanceConfig extends Vue {
  formVisible: boolean = false;
  dialogType: string = 'add';
  roleListData:any[] = []
  searchVal:any = ''
  form: any = {
    checkSettingRoleId: '',
    checkRoleIds: [],
    reCheckRoleIds: [],
    auditRoleIds: []
  };
  pageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 10,
    onChange: this.changePage
  };

  get rows () {
    return {
      checkRoleIds: {
        label: '验收员',
        el: 'select',
        placeholder: '请选择角色',
        options: this.roleListData,
        mode: 'multiple',
        rules: [{ required: true, message: '请选择角色', trigger: 'blur' }]

      },
      reCheckRoleIds: {
        label: '复验员',
        el: 'select',
        placeholder: '请选择角色',
        mode: 'multiple',
        options: this.roleListData,
        rules: [{ required: true, message: '请选择角色', trigger: 'blur' }]
      },
      auditRoleIds: {
        label: '审核员',
        el: 'select',
        placeholder: '请选择角色',
        options: this.roleListData,
        showSearch: true,
        mode: 'multiple',
        rules: [{ required: true, message: '请选择角色', trigger: 'blur' }]
      }
    }
  }
  typeList:any={
    'PROJECT': '项目材料采购',
    'DEPT': '部门采购'
  }
  Data: any[] = []
  tableColumn: any = {
    index: {
      label: '序号',
      width: 120
    },
    settingType: {
      label: '验收类型',
      width: 120,
      map: this.typeList
    },
    checkRoleNames: {
      label: '验收员',
      width: 100
    },
    reCheckRoleNames: {
      label: '复验员',
      width: 100
    },
    auditRoleNames: {
      label: '审核员',
      width: 100
    },
    createTime: {
      label: '修改时间',
      width: 100
    },
    createrName: {
      label: '操作人',
      width: 100
    },
    action: {
      label: '操作',
      width: 120,
      template: [
        {
          tag: 'a',
          text: '详情',
          callback: this.showEditDialog
        }
      ]
    }
  }
  showModel (val:any) {
      this.formVisible = true;
  }
  changePage (val: number) {
    this.pageConfig.current = val;
    this.getList();
  }
  hideFormVisible () {
    this.formVisible = false;
    this.form = {
      checkRoleIds: [],
      reCheckRoleIds: [],
      auditRoleIds: []
    };
  }
  // 获取角色列表
  getRoleList () {
    let data = {
      page: 1,
      size: 100
    }
    this.$api.adminRoleRoleListFetch(data).then(res => {
      if (res.code == 0) {
        res.data.records.map((item:any) => {
          item.value = item.roleId
          item.label = item.roleName
        })
        this.roleListData = res.data.records
      }
    }).catch()
  }
  confirmHandle () {
    this.$api.checkSettingUpdateCheckRoleSettingFetch(this.form).then(res => {
      if (res.code == 0) {
        this.$message.success('操作成功')
        this.formVisible = false;
        this.getList()
      }
    }).catch()
  }
  showEditDialog (val:any) {
    this.form.checkSettingRoleId = val.checkSettingRoleId
    this.form.checkRoleIds = val.checkRoleIds ? val.checkRoleIds.split(',') : undefined
    this.form.reCheckRoleIds = val.reCheckRoleIds ? val.reCheckRoleIds.split(',') : undefined
    this.form.auditRoleIds = val.auditRoleIds ? val.auditRoleIds.split(',') : undefined
    this.formVisible = true
  }
  // 获取列表数据
  getList () {
      let data = {
          // name: this.searchForm.name,
          // projectId: this.searchForm.projectId
      }
      this.$api.checkSettingCheckRoleSettinglistFetch().then((res:any) => {
          if (res.code == 0) {
              res.data.map((item:any, index:any) => {
                  item.index = Number(index + 1)
              })
              this.Data = res.data
          }
      }).catch()
  }
  init () {
      this.getList()
      this.getRoleList()
  }
}
</script>
<style lang='scss' scoped>
.red {
  color: red
}
</style>
